function dragTableColumns(tableId, onDragEnd, options) {
  const {minWidth} = options
  const table = document.querySelector(`#${tableId}`);
  let draggableColumns = Array.from(table.querySelectorAll('th[data-draggable="true"]'));
  if(draggableColumns.length === 0) {
    draggableColumns = Array.from(table.querySelectorAll('th'))
  }
  draggableColumns.forEach((column, index, arr) => {
    // 最后一列不允许拖动
    if(index === arr.length - 1) return
    column.style.position = 'relative';
    // 注意一开始有宽度，可以防止宽度改变时从两边改变
    column.style.width = column.offsetWidth + 'px'

    const dragHandle = document.createElement('div');
    dragHandle.classList.add('drag-handle');
    column.appendChild(dragHandle);

    let startX = 0;
    let startWidth = 0;
    let nextWidth = 0

    dragHandle.addEventListener('mousedown', e => {
      startX = e.pageX;
      startWidth = column.offsetWidth;
      nextWidth = column.nextElementSibling.offsetWidth;

      table.style.userSelect = 'none';

      column.classList.add('dragging');
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    });

    const handleMouseMove = e => {
      const width = startWidth + (e.pageX - startX);
      const nWidth = nextWidth - (e.pageX - startX)
      if(width < minWidth || nWidth < minWidth) return
      column.nextElementSibling.style.width = nWidth + 'px'
      column.style.width = `${width}px`;
      // 同步表格头和表格主体同一列的宽度
      const columnIndex = Array.from(column.parentNode.children).indexOf(column);
      const cells = Array.from(table.querySelectorAll(`tbody tr td:nth-child(${columnIndex + 1})`));

      cells.forEach(cell => cell.style.width = `${width}px`);
      // Array.from(column.parentNode.children).forEach(column => {
      //   column.style.width = `${column.offsetWidth}px`
      // })
    };

    const handleMouseUp = () => {
      column.classList.remove('dragging');

      // Array.from(column.parentNode.children).forEach(column => {
      //   column.style.width = `${column.offsetWidth}px`
      // })
      table.style.userSelect = 'text';
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);

      // 触发回调函数
      const columnWidths = draggableColumns.map(column => ({
        index: Array.from(column.parentNode.children).indexOf(column),
        width: column.offsetWidth
      }));
      onDragEnd(columnWidths);
    };
  });
}

dragTableColumns('my-table', columnWidths => {
  console.log(columnWidths);
}, { minWidth: 20 });